<template>
  <view >
    <view class="uni-list">
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                <text>费用类别</text>
            </view>
            <view class="uni-list-cell-db">
                <picker @change="bindsecurityChange" :value="securityindex" :range="securityType" @columnchange="bindMultiPickerColumnChange" mode="multiSelector">
                    <text class="uni-input">{{securityType[0][securityindex[0]]}} - {{securityType[1][securityindex[1]]}}</text>
                    <image src="/static/img/right.png" class="right_img"></image>
                </picker>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                <text>金额</text>
            </view>
            <view class="uni-list-cell-db">
                <input class="uni-input" placeholder="请输入金额" :value="caidData.LI_MONEY" @input="workChange" type="number"/>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                <text>单位</text>
            </view>
            <view class="uni-list-cell-db">
                <picker @change="bindunitChange" :value="unitindex" :range="unitType">
                    <text class="uni-input">{{unitType[unitindex]}}</text>
                    <!-- <image src="/static/img/right.png" class="right_img"></image> -->
                </picker>
            </view>
        </view>
        <view class="uni-list-cell">
            <view class="uni-list-cell-left">
                <text>费用描述</text>
            </view>
            <view class="uni-list-cell-db">
                <input class="uni-input" placeholder="请输入费用描述" :value="caidData.LI_DESC" @input="retireChange" type="number"/>
            </view>
        </view>
        <view class="item">
            <view class="imglist" v-if="caidData.LI_IMG.length">
                <div class="relative" v-for="(item,index) in caidData.LI_IMG" :key="item">
                    <image src="/static/img/removeImg.jpg" @click.stop="removeImg(caidData.LI_IMG,index)" class="removeImg"></image>
                    <image :src="$host+item" @click="previewImage(caidData.LI_IMG, index)" class="user_pic"></image>
                </div>
                <image src="/static/img/upload.png" class="user_pic" @click="uploadpictures"></image>
            </view>
            <image src="/static/img/upload.png" v-if="!caidData.LI_IMG.length" @click="uploadpictures"></image>
            <text class="explain" v-if="!caidData.LI_IMG.length">提供证明</text>
        </view>
    </view>
    <button @click="goEditallowances" class="but">确定</button>
  </view>
</template>

<script>
import { guid } from '@/utils/tool.js'
  export default {
    data() {
      return {
        isRange: false,
        max_val:0,
        min_val:0,
        val_message:'',
        index:0,
        isAdd: 0, // 0添加，1编辑
        isWindows: false,
        securityType: [[],[]],
        unitType:['年', '月'],
        navList: [],
        securityindex: [0,0],
        unitindex: 0,
        caidData: {
            "LM_GUID":"",//户号
            "LI_TYPE":"",//收入、支出
            "LI_SUB":"",//费用类型
            "LI_ITEM":"",//费用名称
            "LI_DESC":"",//费用描述
            "LI_MONEY":0,//费用金额
            "LI_UNIT":"",//单位：年、月
            "LI_IMG": []//证明材料图片，多图用逗号,隔开(存服务器返回的相对路径)
        },
        $host: this.$host
      }
    },
    onLoad(options) {
        let that = this;
        uni.getSystemInfo({
            success: function (res) {
                if (res.platform == 'windows') {
                    that.isWindows = true
                }
            }
        });
        this.isAdd = Number(options.isAdd);
        if (!Number(options.isAdd)) {
            this.caidData.LM_GUID = options.LM_GUID
            this.caidData.LI_TYPE = options.LI_TYPE
        } else {
            uni.showLoading({
                title: '加载中'
            });
            this.index = options.index;
            this.caidData = Object.assign(this.caidData ,JSON.parse(decodeURIComponent(options.data)))
        }
        this.globalGetData('收支名目', 'dict_sub2,dict_sub3,max_val,min_val,val_message', options.LI_TYPE)
    },
    methods: {
        // 编辑回显
        edidEcho () {
            this.securityindex[0] = this.securityType[0].indexOf(this.caidData.LI_SUB)
            let community = []
            this.navList.forEach(item => {
                if (this.securityType[0][this.securityindex[0]] == item.dict_sub2) {
                    community.push(item.dict_sub3)
                }
            });
            this.securityType[1] = community
            this.securityType.push()
            this.securityindex[1] = this.securityType[1].indexOf(this.caidData.LI_ITEM)
            this.unitindex = this.unitType.indexOf(this.caidData.LI_UNIT)
            this.range()
        },
        // 费用类型
        bindsecurityChange(e) {
            this.securityindex = e.target.value
            this.range()
        },
        // 费用单位
        bindunitChange(e) {
            this.unitindex = e.target.value
        },
        // 下拉二级选择
        bindMultiPickerColumnChange(e) {
            if (e.detail.column) {
                return false
            }
            let community = []
            this.navList.forEach(item => {
                if (this.securityType[0][e.detail.value] == item.dict_sub2) {
                    community.push(item.dict_sub3)
                }
            });
            this.securityType[1] = community
            this.securityType.push()
        },
        workChange (e) {
            this.caidData.LI_MONEY = e.detail.value
        },
        retireChange (e) {
            this.caidData.LI_DESC = e.detail.value
        },
        // 合数据，返回上一页
        goEditallowances () {
            this.caidData.LI_MONEY = Number(this.caidData.LI_MONEY)
            if (this.isRange) {
                if (this.caidData.LI_MONEY<this.min_val) {
                    uni.showToast({title: this.val_message,icon: 'none'});
                    return false
                } 
                if (this.caidData.LI_MONEY>this.max_val) {
                    uni.showToast({title: this.val_message,icon: 'none'});
                    return false
                }
            }
            if (!this.caidData.LI_MONEY) {
                uni.showToast({title: '请输入费用金额',icon: 'none'});
                return false
            }
            if (!this.caidData.LI_IMG.length) {
                uni.showToast({title: '请上传证明材料',icon: 'none'});
                return false
            }
            this.caidData.LI_SUB = this.securityType[0][this.securityindex[0]]
            this.caidData.LI_ITEM = this.securityType[1][this.securityindex[1]]
            this.caidData.LI_UNIT = this.unitType[this.unitindex]
            let that = this;
            let pages = getCurrentPages();
            let currPage = pages[pages.length - 1];   //当前页面
            let prevPage = pages[pages.length - 2];  //上一个页面
            if (this.isAdd) {
                prevPage.$vm.caidData.DT_INCOME[this.index] = that.caidData
            } else {
                prevPage.$vm.caidData.DT_INCOME.push(that.caidData);
            }
            uni.navigateBack({delta: 1})
        },
        // 录入证明图片
        uploadpictures() {
            if (this.isWindows) {
                uni.showModal({
                    title: '提示',
                    showCancel: false,
                    content: '不支持电脑上传图片，请用手机操作'
                });
                return false
            }
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['camera', 'album'],
                success: function (self) {
                    that.$http.upload('uploadLDIMG', {filePath: self.tempFilePaths[0], name: encodeURI('filePath'),formData:{
                        "LM_GUID":that.caidData.LM_GUID,
                        "LD_ID":that.caidData.ID,
                        "ckface":false
                    }
                    }).then(res => {
                        let imginfo = JSON.parse(res).data
                        that.caidData.LI_IMG.push(imginfo.RPATH)
                    })
                }
            })
        },
        // 取值范围
        range () {
            this.navList.forEach(item => {
                if (item.dict_sub2 == this.securityType[0][this.securityindex[0]] && item.dict_sub3 == this.securityType[1][this.securityindex[1]] && item.val_message) {
                    this.isRange = true
                    this.max_val = item.max_val
                    this.min_val = item.min_val
                    this.val_message = item.val_message
                }
            });
        },
        // 获取数据字典
        globalGetData(dict_sub, showField, type) {
            let that = this;
            this.$http.get('dicts', {params: {dict_sub: dict_sub, dict_sub1: type|| that.caidData.LI_TYPE,dict_sub2: '',showField: showField}}).then(res => {
                res.data.forEach(item => {
                    this.navList.push(item)
                    this.securityType[0].push(item.dict_sub2)
                    if (item.dict_sub2 === this.securityType[0][0]) {
                        this.securityType[1].push(item.dict_sub3)
                    }
                    this.securityType[0] = Array.from(new Set(this.securityType[0]))
                    this.securityType[1] = Array.from(new Set(this.securityType[1]))
                });
                that.range()
                if (that.isAdd) {
                    uni.hideLoading()
                    that.edidEcho()
                }
            })
        },
        // 预览图片
        previewImage (tempFilePaths, index) {
            let imglist = []
            tempFilePaths.forEach(item => {
                imglist.push(this.$host + item)
            });
            uni.previewImage({
                current: index,
                urls: imglist
            });
        },
        // 删除图片
        removeImg (tempFilePaths, index) {
            uni.showModal({
                title: '删除提示',
                content: '是否确定删除该图片？',
                success: function (res) {
                    if (res.confirm) {
                        tempFilePaths.splice(index,1)
                    }
                }
            });
        }
    }
  }
</script>

<style lang="scss" scoped>
.but{
    background-color: #1EC88B;
    border: none;
    height: 94upx;
    line-height: 94upx;
    text-align: center;
    border-radius: 10upx;
    color: #fff;
    margin:20upx;
    font-size: 36upx;
}
.card_info{
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    font-size: 28upx;
    color: #101010;
    padding: 28upx;
    position: relative;
    .li{
        line-height: 60upx;
    }
    .user_pic{
        position: absolute;
        right: 28upx;
        top: 28upx;
        width: 170upx;
        height: 160upx;
    }
}
.uni-list-cell{
    margin: 12upx 0;
    display: flex;
    height: 100upx;
    align-items: center;
    font-size: 32upx;
    color: #6D6E71;
    // padding: 0 30upx;
    justify-content: space-between;
    .uni-list-cell-left{
        .down_img{
            margin-right: 20upx;
            width: 44upx;
            height: 44upx;
            vertical-align: middle;
        }
        text{
            vertical-align: middle;
        }
    }
    .uni-list-cell-db{
        width: 80%;
        font-size: 24upx;
        text-align: right;
    }
    .uni-input{
       vertical-align: middle; 
    }
    .right_img{
        width: 50upx;
        height: 50upx;
        vertical-align: middle;
    }
}
.uni-list{
    padding:0 30upx;
    .item{
        color: #6D6E71;
        padding: 30upx;
        font-size: 24upx;
        box-sizing: border-box;
        border-top: solid 1px #E5E5E5;
        border-bottom: solid 1px #E5E5E5;
        display: block;
        .uni-list-cell-pd{
            display: inline-block;
            width: 50%;
            font-size: 32upx;
            margin: 10upx 0;
        }
        .imglist{
            .user_pic{
                width: 150upx;
                height: 150upx;
                margin:0rpx 20rpx 20rpx 20rpx;
                padding: 0;
            }
            .relative{
                position: relative;
                display: inline-block;
                .removeImg{
                    width: 36upx;
                    height: 36upx;
                    position: absolute;
                    right: 6upx;
                    top: -14upx;
                    border: 0;
                    margin: 0;
                    padding: 0;
                }
            }
        }
        image{
            width: 80upx;
            height: 90upx;
            padding: 20upx;
            display: inline-block;
            border: solid 2upx #E5E5E5;
            margin: 0 80upx 0 20upx;
            vertical-align:middle;
        }
        .explain{
            display: inline-block;
            vertical-align:middle;
            text{
                line-height: 50upx;
                display: block;
            }
        }
    }
}
</style>
